<template>
  <div class="doc-box">
    <div>
      <a-space wrap>
        <a-input v-model:value="valueMarkedTest" style="width: 300px"></a-input>
        <a-button type="primary" @click="handleInsertText">插入文本</a-button>
        <a-button @click="handleInsertMarkdown">插入markdown</a-button>
        <a-button type="text">Text Button</a-button>
        <a-button type="link">Link Button</a-button>
      </a-space>
      <div v-html="markdownToHtml" class="markdown-body"></div>
    </div>
    <div class="editor-box">
      <TinymceEditor :value="formData.content" @update:value="updateContent" />
    </div>
  </div>
</template>
<script setup>
  import { shallowRef, ref, reactive } from "vue";
  import TinymceEditor from "./components/MyTiny/index.vue";
  import { marked } from "marked";
  import hljs from "highlight.js";
  import "highlight.js/styles/foundation.css";
  const value = ref("heww loo");
  const formData = reactive({
    content: "",
  });
  const updateContent = (v) => {
    markdownToHtml.value = v;
    console.log(`内容变更了:` + v);
  };
  const handleInsertText = () => {
    formData.content = formData.content + " 插入的文本123 ";
  };

  const render = new marked.Renderer();
  marked.setOptions({
    renderer: render, // 这是必填项
    gfm: true, // 启动类似于Github样式的Markdown语法
    pedantic: false, // 只解析符合Markdwon定义的，不修正Markdown的错误
    sanitize: false, // 原始输出，忽略HTML标签（关闭后，可直接渲染HTML标签）
    // 高亮的语法规范
    highlight: (code, lang) => hljs.highlight(code, { language: lang }).value,
  });

  const valueMarkedTest = ref("**Hello,World**  \n# 一级菜单 \n ## 二级菜单 ");
  const markdownToHtml = shallowRef("");
  markdownToHtml.value = marked(valueMarkedTest.value);
  // // markdown转为html后，直接更新到富文本内容中
  const handleInsertMarkdown = () => {
    markdownToHtml.value = marked(valueMarkedTest.value);
    console.log(markdownToHtml.value);
    formData.content = formData.content + markdownToHtml.value;
  };
</script>

<style scoped>
  .doc-box {
    padding: 0;
    height: 100%;
    border: solid 1px red;
    width: 100%;
    height: 100%;
  }

  .markdown-body {
    background-color: pink;
    margin: 10px;
  }

  .editor-box {
    margin-top: 10px;
    width: 100%;
    max-height: calc(100% - 60px);
    border: solid 1px green;
    padding: 0;
  }
</style>
